<template>
  <div>
    <h1>{{ title1 }}:{{input}}</h1>
<!--    <button @click="updateFunction('789')">son - {{input}}</button>-->
    <button @click="updateData">改变祖页面的值</button>
  </div>
</template>
<script>
import {ref, inject, watch, watchEffect} from "vue";
export default {
  name: 'Son',
  setup(props, context) {
    // 获取祖组件的值
    let title1 = ref("孙组件1")
    let input = inject("input");
    //  获取祖组件暴露的函数
    const updateFunction = inject('updateFunction',Function,true)
    const  updateData =()=>{
      updateFunction(`${title1.value}改了祖组件函数的值`)
    }


    return{
      input,
      title1,
      updateData,
    }
  }
}
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
